<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item>
        <el-input
            v-model="searchForm.username"
            placeholder="医生名"
            clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getDocList">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="docList"
        stripe
        style="width: 100%">
      <el-table-column
          type="index"
          label="序号"
          width="90">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="professionalTitle"
          width="150"
          label="职称">
      </el-table-column>
      <el-table-column
          label="性别"
          width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{analyzeGender(scope.row.gender)}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="age"
          width="100"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="depcode"
          width="120"
          label="科室编号">
      </el-table-column>
      <el-table-column
          prop="expertise"
          label="擅长">
      </el-table-column>
      <el-table-column
          label="头像">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.imageUrl"
              fit="contain">
            </el-image>
          </span>
        </template>
      </el-table-column>
      <el-table-column
          width="100"
          label="状态">
        <template slot-scope="scope">
          <el-tag
              v-if="scope.row.authStatus===0"
            effect="dark"
            type="info"
          >
            待审核
          </el-tag>
          <el-tag
              v-else-if="scope.row.authStatus===1"
              effect="dark"
              type="success"
          >
            已审核
          </el-tag>
          <el-tag
              v-else
              effect="dark"
              type="danger"
          >
            待修改
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-popconfirm
              v-if="scope.row.authStatus===0"
              title="请确认操作"
              @confirm="handlePermitCertificate(scope.row.id)"
          >
            <el-button slot="reference" type="success">通过审核</el-button>
          </el-popconfirm>

          <el-button v-if="scope.row.authStatus===0||scope.row.authStatus===1" type="warning" @click="visible=true,authInfo.id=scope.row.id">退回审核</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 30]"
        :current-page="current"
        :page-size="size"
        :total="total">
    </el-pagination>

    <el-dialog title="退回审核" :visible.sync="visible">
      <el-form :model="authInfo">
        <el-form-item label="退回原因" label-width="80" required>
          <el-input v-model="authInfo.advice" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleReturnCertificate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import doctorApi from "@/api/doctor"
export default {
  name: "index",
  data() {
    return {
      total: 0,
      size: 5,
      current: 1,
      visible:false,
      searchForm:{},
      authInfo:{},
      docList:[],
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      await this.getDocList()
    },
    async getDocList(){
      this.searchForm = {username:this.searchForm.username,depcode:this.searchForm.depcode,size:this.size,current:this.current}
      const{data:res} = await doctorApi.list(this.searchForm)
      this.total = res.data.total
      this.docList = res.data.records
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDocList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.getDocList()
    },
    analyzeGender(val){
      if (val==null){
        return "未添加姓名"
      }else {
        if (val===0){
          return "男"
        }else{
          return "女"
        }
      }
    },
    async handlePermitCertificate(id){
      this.authInfo.authStatus=1
      this.authInfo.id = id
      const{data:res} = await doctorApi.updateAuth(this.authInfo)
      if (res.code===200){
        this.$message.success("审核成功")
      }else{
        this.$message.error("审核失败")
      }
      this.authInfo={}
      await this.getDocList()
    },
    async handleReturnCertificate(){
      this.authInfo.authStatus=2
      const{data:res} = await doctorApi.updateAuth(this.authInfo)
      if (res.code===200){
        this.$message.success("操作成功")
      }else{
        this.$message.error("操作失败")
      }
      this.authInfo={}
      this.visible=false
      await this.getDocList()
    }
  }
}
</script>

<style lang="less" scoped>

</style>